<template>
  <div class="content">
    <div class="ui-promotions-wrapper ui-detail-common" @click="goComment">
      <!-- header -->
      <div class="promotions-header header">
        <h3>
          评价
          <i v-if="reviewList.length">（{{reviewList.length}}）</i>
        </h3>
      </div>
    </div>
    <!-- <mt-header title="" class="common-header">
      <mt-button slot="left" class="iconfont" @click="goComment">评价</mt-button>
      <mt-button slot="right" class="iconfont" @click="goComment">&#xe650;</mt-button>
    </mt-header>-->
    <!-- <info-goods-review></info-goods-review> -->
    <div class="content-main">
      <div class="ui-evaluation-body">
        <div class="list" v-for="(item, index) in reviewList.slice(0, 2)" v-if="reviewList.length > 0">
          <div>
            <span>
              {{ item.geval_isanonymous?'匿名':item.geval_frommembername }}
              <span
                v-bind:class="{
								'good-review': item.geval_scores > 3,
								'medium-review': item.geval_scores > 1,
								'bad-review': item.geval_scores == 1
							}"
              >{{ getGrade(item.geval_scores) }}</span>
            </span>

            <span>{{ getTime(item.geval_addtime) }}</span>
          </div>
          <p v-if="item.geval_content">{{ item.geval_content }}</p>
          <!-- <p v-if="item.geval_image" class="review-list-imgs">
            <img class="imgs" v-for="(imgs , index) in item.geval_image" :key="index" :src="imgs" />
          </p> -->
          <p v-if="!item.geval_content">无评价信息</p>
        </div>
        <div class="list-emptys" v-if="reviewList.length <= 0">
          <p>本商品暂无评价</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { evaluation } from '../static'
import { getReviewList } from '../../../../api/homegoodsdetail'
// import InfoGoodsReview from './InfoGoodsReview';
export default {
  data () {
    return {
      staticData: evaluation,
      reviewList: '',
      ispush: false,
      id: this.$store.state.goodsdetail.currentProductId
        ? this.$store.state.goodsdetail.currentProductId
        : '',
      grade: 0,
      page: 0
      // HomeGoodsdetailProductReview
    }
  },
  components: {
    // InfoGoodsReview
  },
  created () {
    this.getReviewList(true)
  },
  methods: {
    goComment () {
      console.log(11)
      this.$router.push({
        name: 'HomeGoodsdetailProductReview'
        // query: { sort_key: this.type }
      })
    },
    getGrade (grade) {
      if (grade == 1) {
        return '差评'
      } else if (grade > 3) {
        return '好评'
      } else {
        return '中评'
      }
    },
    getTime (timestamps) {
      let date = new Date(timestamps * 1000)
      let year = date.getFullYear()
      let month = date.getMonth() + 1
      let day = date.getDate()
      return year + '-' + month + '-' + day
    },
    getReviewList (ispush) {
      getReviewList(this.id, this.grade, this.page).then(res => {
        if (res) {
          console.log(res)
          this.reviewList = res.result.goods_eval_list
          //   if (ispush) {
          //     this.reviewList = this.reviewList.concat(
          //       res.result.goods_eval_list
          //     );
          //   } else {
          //     this.reviewList = res.result.goods_eval_list;
          //   }
          //   if (res.hasmore) {
          //     this.loading = false;
          //   } else {
          //     this.loading = true;
          //   }
          //   this.total = res.page_total;
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.imgs{
  width: 28vw;
  height: 28vw;
  margin: 10px 2.2vw 0 0;
}
//评价标题
.ui-promotions-wrapper {
  height: auto;
  border-bottom: 1px solid #f5f5f5;
  .promotions-header {
    padding: 0 0.75rem;
    margin-top: 0.4rem;
    height: 2rem;
    line-height: 2rem;
    background: #fff;
    h3 {
      font-size: 0.7rem;
      color: #333;
      .iconfont {
        float: right;
        margin-right: -0.55rem;
      }
      i{
        min-width: 25px;
        height: 25px;
        // background: red;
        color: #000000;
        margin-top: 0.5rem;
        padding: 0 0.25rem;
        border-radius: 50%;
        }
    }
  }
}

.common-header {
  background: #ffffff;
  color: #000;
  border-bottom: 1px solid #f5f5f5;
}
.ui-evaluation-body {
  padding: 0 0.75rem;
  background: rgba(255, 255, 255, 1);
  .list {
    padding: 0.75rem 0;
    border-bottom: 0.5px solid rgba(232, 234, 237, 1);
    color: #333;
    font-size: 0.75rem;
    div {
      overflow: hidden;
      padding-bottom: 0.75rem;
      display: flex;
      justify-content: space-between;
      align-content: center;
      align-items: center;
      span {
        &:first-child {
          display: flex;
          justify-content: space-around;
          align-content: center;
          align-items: center;
          span {
            margin-left: 0.75rem;
            color: #ffffff;
            font-size: 0.6rem;
          }
        }
        &:last-child {
          color: #8f8e94;
          font-size: 0.6rem;
        }
        &.good-review {
          background: #fc2e39;
          width: 1.8rem;
          height: 0.8rem;
          text-align: center;
          background-size: cover;
          line-height: 0.8rem;
          border-radius: 0.4rem;
        }
        &.medium-review {
          background: $primaryColor;
          width: 1.8rem;
          height: 0.8rem;
          text-align: center;
          background-size: cover;
          line-height: 0.8rem;
          border-radius: 0.4rem;
        }
        &.bad-review {
          background: #c3c3c3;
          width: 1.8rem;
          height: 0.8rem;
          text-align: center;
          background-size: cover;
          line-height: 0.8rem;
          border-radius: 0.4rem;
        }
      }
    }
    p {
      padding: 0;
      margin: 0;
      flex-basis: 100%;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
  }
  .list-emptys {
    // position: absolute;
    // top: 50%;
    // left: 50%;
    // transform: translate(-50%, -50%);
    text-align: center;
    padding: 40px 0;
    img {
      width: 2.75rem;
    }
    p {
      color: #7c7f88;
      font-size: 0.7rem;
      padding: 0;
      margin: 0;
      font-weight: normal;
    }
  }
}
</style>
